<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <title>提前还清借款</title>
    <link rel="stylesheet" href="./reset.min.css">
    <style>
        body {
            background-color: #f6f6f6;
        }

        #app {
            background-image: url('./bg.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 1120px;
            height: 2185px
        }

        .t1 {
            position: absolute;
            font-size: 45px;
            font-weight: 700;
            margin: 207px 308px;
            color: #1e1e1e
        }

        .t2 {
            margin-top: 204px;
            right: 5px;
            font-size: 40px;
        }

        .t2-2,
        .t2 {
            position: absolute;
            color: #181818;
        }

        .t2-2 {
            margin-top: 387px;
            right: 196px;
            font-size: 56px;
            font-weight: 700;
            line-height: 56px;
        }

        .t3 {
            position: absolute;
            color: #7e7e7e;
            margin: 264px 195px;
            font-size: 40px;
        }

        .t2-text {
            color: #818181;
            font-weight: 500;
            font-size: 38px;
            display: inline-block;
            vertical-align: middle;
        }

        .t2-2-text {
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <script type="text/javascript" src="./vue.min.js"></script>
    <div id="app">
        <div>
            <div class="t1">
                {{t1}}
            </div>
            <div class="t2">
                应还 ¥{{t2}}
            </div>
            <div class="t2-2">
                <span class="t2-text">总计 </span>
                <span class="t2-2-text">¥{{t2}}</span>
            </div>
            <div class="t3">
                {{t3}}
            </div>
        </div>
    </div>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                t1: 10000,
                t2: 10060,
                t3: '2022/07/12'
            },
            mounted: function () {
                /* 获取时间和数额，计算相差天数，计算利 */
                let params = new URLSearchParams(window.location.search.substring(1))
                let v = Number(params.get('value'))
                let k = Math.ceil((new Date().getTime() - new Date(params.get('time')).getTime()) / (24 *
                    60 * 60 * 1000));
                let l = v / 10000 * 3 * k;
                this.t1 = v.toFixed(2)
                this.t2 = (l + v).toFixed(2)
                /* 格式时间 */
                this.t3 = this.formatDate(params.get('time'))
            },
            methods: {
                formatDate: function (time) {
                    let date = new Date(time);
                    let y = date.getFullYear();
                    let m = date.getMonth() + 1;
                    let d = date.getDate();
                    m = m < 10 ? '0' + m : m;
                    d = d < 10 ? '0' + d : d;
                    return y + '/' + m + '/' + d;
                },
            }
        })
    </script>
</body>

</html>
<!-- 算法 -->
<!-- /dai/index.html?time=2022-07-12&value=100000 -->
<!-- /dai/index.html?time=2022-09-09&value=40000 -->